<template>
  <div>
    <a href="javascript:;" class="show-send-msg" @click="handleClickPosting">
      <!--<svg-icon  class="icon" icon-class="icon_write" />-->
      <!--<p>发帖</p>-->
      <img class="img autoScale" src="https://img.wifenxiao.com/h5-wfx/images/community/articleImg.png" alt="">
      <img class="txt" src="https://img.wifenxiao.com/h5-wfx/images/community/articleTxt.png" alt="">
    </a>
    <Comment ref="Comments" @reloadArticle="reloadArticle"></Comment>
  </div>
</template>
<script>
  import Vue from 'vue'
  import Comment from '@/components/Comment'
  export default Vue.extend({
    name: 'Posting',
    components: {
      Comment
    },
    props: {
      postingInfoChild: {
        type: Object,
        default: {
          commentType: 1
        }
      }
    },
    data() {
      return {
        commentInfo: {}
      }
    },
    methods: {
      // 点击发帖按钮
      handleClickPosting() {
        this.$refs.Comments.dialogVisible = true
        this.$refs.Comments.commentType = 1
      },

      // 发帖成功重新请求文章列表数据
      reloadArticle() {
        this.$emit('reloadArticleList')
      }

    },
    mounted() {
      // // console.log(this.postingInfoChild, 11111111)
    }
    /* watch: {
      postingInfoChild: (val) => {
        // console.log(val, 'watch')
      }
    } */
  })
</script>
<style lang="scss">
  @import "src/styles/transition";
  // 发帖按钮
	.show-send-msg {
    position: fixed;
    bottom: 100px;
    right: 50px;
    .icon{
      display: block;
      width:40px;
      height:40px;
      margin: 16px auto 7px;
    }
    .img{
      width: 166px;
      display: block;
      margin-bottom: 2px;
      &.autoScale{
        animation:autoScale 4s linear infinite;
      }
    }
    .txt{
      display: block;
      width: 77px;
      margin: 0 auto;
    }
    p{
      font-size:24px;
      text-align:center;
      color:#fff;
    }
  }
</style>
